<template>
  <view class="category">
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>
    <view class="main">
      <view class="left">
        <view
          class="item"
          :class="current === index ? 'active' : ''"
          @click="currentFn(index)"
          v-for="(item, index) in menus"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <view class="right">
        <view class="group" v-for="item1 in contents" :key="item1.cat_id">
          <view class="group-title">/ {{ item1.cat_name }} /</view>
          <view class="group-content">
            <navigator
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <u-image height="120" :src="item2.cat_icon"></u-image>
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      menus: [],
      contents: [],
      current: 0,
    };
  },
  async onLoad() {
    const result = await this.$u.get("/categories");
    console.log(111, result);
    // 利用uview的特性 this.xxxx设置全局变量来存储返回到数据
    this.categories = result.message;
    // 用变量来过滤
    this.menus = this.categories.map((v) => v.cat_name);
    this.contents = this.categories[0].children;
  },
  methods: {
    currentFn(index) {
      // console.log(index);
      // 把选到的哪个标签的下标设置为对应的下标
      this.current = index;
      // 全局变量的index的children赋值给显示内容
      this.contents = this.categories[index].children;
    },
  },
};
</script>
<style scoped lang="scss">
.category {
  .main {
    display: flex;
    height: calc(100vh - 84rpx);
    .left {
      width: 182rpx;
      overflow: auto;
      .item {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: red;
      }
    }
    .right {
      flex: 1;
      overflow: auto;
      .group-title {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .group-content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 48rpx;

        navigator {
          width: 120rpx;
          margin-right: 56rpx;
          view {
            text-align: center;
          }
        }
        navigator:nth-child(3n) {
          margin-right: 0rpx;
        }
      }
    }
  }
}
</style>
